<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧教育资源共享平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        :root {
            --primary: #2a6bc1;
            --secondary: #1c2333;
            --accent: #00cfd5;
            --light: #f8f9fa;
            --dark: #121726;
            --success: #17c3b2;
            --warning: #ffbe0b;
            --danger: #ff6b6b;
            --gray: #6c757d;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, var(--dark) 0%, var(--secondary) 100%);
            color: var(--light);
            min-height: 100vh;
            line-height: 1.6;
            padding-bottom: 2rem;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 头部样式 */
        header {
            background: rgba(18, 23, 38, 0.8);
            backdrop-filter: blur(10px);
            padding: 1.5rem 0;
            border-bottom: 1px solid rgba(42, 107, 193, 0.3);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-icon {
            font-size: 2.5rem;
            color: var(--accent);
        }

        .logo-text {
            font-size: 1.8rem;
            font-weight: 700;
            background: linear-gradient(to right, var(--accent), var(--primary));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* 主标题区域 */
        .hero {
            text-align: center;
            padding: 3rem 0;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%232a6bc1" fill-opacity="0.1" d="M0,128L48,117.3C96,107,192,85,288,112C384,139,480,213,576,224C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>') no-repeat bottom;
            background-size: 100% auto;
        }

        .hero h1 {
            font-size: 2.8rem;
            margin-bottom: 1rem;
            background: linear-gradient(to right, var(--accent), var(--primary));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero p {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.8);
            max-width: 700px;
            margin: 0 auto;
        }

        /* 筛选区域 */
        .filters {
            background: rgba(28, 35, 51, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 25px;
            margin: 2rem 0;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(42, 107, 193, 0.2);
        }

        .filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .filter-group {
            margin-bottom: 15px;
        }

        .filter-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: var(--accent);
        }

        .styled-select {
            width: 100%;
            padding: 12px 15px;
            border-radius: 8px;
            border: 1px solid rgba(42, 107, 193, 0.3);
            background: rgba(18, 23, 38, 0.7);
            color: var(--light);
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .styled-select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(42, 107, 193, 0.3);
        }

        .search-btn {
            background: linear-gradient(135deg, var(--primary) 0%, #1a56db 100%);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 25px;
        }

        .search-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(42, 107, 193, 0.4);
        }

        /* 资源展示 */
        .resources-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 25px;
            margin-top: 3rem;
        }

        .resource-card {
            background: linear-gradient(135deg, rgba(28, 35, 51, 0.8) 0%, rgba(18, 23, 38, 0.8) 100%);
            border-radius: 15px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid rgba(42, 107, 193, 0.2);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .resource-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            border-color: rgba(42, 107, 193, 0.4);
        }

        .card-header {
            background: rgba(42, 107, 193, 0.1);
            padding: 20px;
            border-bottom: 1px solid rgba(42, 107, 193, 0.2);
        }

        .card-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--light);
        }

        .card-subtitle {
            color: var(--accent);
            font-size: 0.9rem;
        }

        .card-body {
            padding: 20px;
        }

        .card-description {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 20px;
            font-size: 0.95rem;
        }

        .file-info {
            display: flex;
            justify-content: space-between;
            color: var(--gray);
            font-size: 0.85rem;
            margin-bottom: 20px;
        }

        .card-actions {
            display: flex;
            gap: 10px;
        }

        .btn {
            padding: 10px 15px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .btn-preview {
            background: rgba(0, 207, 213, 0.15);
            color: var(--accent);
            border: 1px solid rgba(0, 207, 213, 0.3);
        }

        .btn-preview:hover {
            background: rgba(0, 207, 213, 0.25);
        }

        .btn-download {
            background: rgba(42, 107, 193, 0.15);
            color: var(--primary);
            border: 1px solid rgba(42, 107, 193, 0.3);
        }

        .btn-download:hover {
            background: rgba(42, 107, 193, 0.25);
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal.active {
            display: flex;
            opacity: 1;
        }

        .modal-content {
            background: linear-gradient(135deg, var(--secondary) 0%, var(--dark) 100%);
            width: 90%;
            max-width: 800px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(42, 107, 193, 0.3);
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .modal.active .modal-content {
            transform: scale(1);
        }

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--light);
        }

        .close-modal {
            background: none;
            border: none;
            color: var(--gray);
            font-size: 1.5rem;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .close-modal:hover {
            color: var(--light);
        }

        .modal-body {
            padding: 25px;
            max-height: 70vh;
            overflow-y: auto;
        }

        /* 预览页面样式 */
        .preview-pages {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .page {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            height: 280px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 20px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .page-number {
            font-size: 3rem;
            font-weight: 800;
            color: rgba(255, 255, 255, 0.1);
            margin-bottom: 15px;
        }

        .page-content {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }

        /* 下载模态框样式 */
        .download-modal .modal-body {
            text-align: center;
        }

        .code-input {
            width: 120px;
            font-size: 2rem;
            text-align: center;
            letter-spacing: 10px;
            padding: 15px;
            margin: 20px 0;
            border-radius: 10px;
            border: 2px solid rgba(42, 107, 193, 0.3);
            background: rgba(18, 23, 38, 0.7);
            color: var(--light);
            font-weight: 700;
        }

        .code-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(42, 107, 193, 0.3);
        }

        .timer {
            margin-top: 15px;
            font-size: 0.9rem;
            color: var(--gray);
        }

        .timer span {
            color: var(--accent);
            font-weight: 600;
        }

        .confirm-btn {
            background: linear-gradient(135deg, var(--primary) 0%, #1a56db 100%);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 15px;
        }

        .confirm-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(42, 107, 193, 0.4);
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .filter-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .filter-grid {
                grid-template-columns: 1fr;
            }

            .resources-container {
                grid-template-columns: 1fr;
            }

            .hero h1 {
                font-size: 2.2rem;
            }

            .preview-pages {
                grid-template-columns: 1fr;
            }
        }

        /* 动画效果 */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(18, 23, 38, 0.5);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <div class="logo-icon"><i class="fas fa-graduation-cap"></i></div>
                <div class="logo-text">智慧教育资源共享平台</div>
            </div>
        </div>
    </header>

    <div class="container">
        <section class="hero">
            <h1>优质教学资源一站式下载平台</h1>
            <p>提供小学、初中、高中全学科教学资源，包括电子课本、教学PPT、随堂练习和各类试卷</p>
        </section>

        <section class="filters">
            <div class="filter-grid">
                <div class="filter-group">
                    <label for="stage"><i class="fas fa-layer-group"></i> 学段</label>
                    <select id="stage" class="styled-select">
                        <option value="">请选择学段</option>
                        <option value="primary">小学</option>
                        <option value="junior">初中</option>
                        <option value="senior">高中</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label for="subject"><i class="fas fa-book"></i> 学科</label>
                    <select id="subject" class="styled-select">
                        <option value="">请选择学科</option>
                        <option value="chinese">语文</option>
                        <option value="math">数学</option>
                        <option value="english">英语</option>
                        <option value="physics">物理</option>
                        <option value="chemistry">化学</option>
                        <option value="biology">生物</option>
                        <option value="history">历史</option>
                        <option value="geography">地理</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label for="grade"><i class="fas fa-signal"></i> 年级</label>
                    <select id="grade" class="styled-select">
                        <option value="">请选择年级</option>
                        <option value="1">一年级</option>
                        <option value="2">二年级</option>
                        <option value="3">三年级</option>
                        <option value="4">四年级</option>
                        <option value="5">五年级</option>
                        <option value="6">六年级</option>
                        <option value="7">七年级</option>
                        <option value="8">八年级</option>
                        <option value="9">九年级</option>
                        <option value="10">高一</option>
                        <option value="11">高二</option>
                        <option value="12">高三</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label for="volume"><i class="fas fa-book-open"></i> 册别</label>
                    <select id="volume" class="styled-select">
                        <option value="">请选择册别</option>
                        <option value="1">上册</option>
                        <option value="2">下册</option>
                        <option value="full">全册</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label for="publisher"><i class="fas fa-building"></i> 出版社</label>
                    <select id="publisher" class="styled-select">
                        <option value="">请选择出版社</option>
                        <option value="pep">人民教育出版社</option>
                        <option value="suzhou">江苏教育出版社</option>
                        <option value="beishi">北京师范大学出版社</option>
                        <option value="foreign">外语教学与研究出版社</option>
                        <option value="huadong">华东师范大学出版社</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label for="type"><i class="fas fa-file-alt"></i> 资源类型</label>
                    <select id="type" class="styled-select">
                        <option value="">请选择资源类型</option>
                        <option value="textbook">电子课本</option>
                        <option value="ppt">配套PPT</option>
                        <option value="exercise">随堂练习</option>
                        <option value="test">试卷</option>
                    </select>
                </div>
            </div>

            <button class="search-btn" id="search-btn">
                <i class="fas fa-search"></i> 搜索资源
            </button>
        </section>

        <section class="resources-container" id="resources-container">
            <!-- 资源卡片将通过JavaScript动态生成 -->
        </section>
    </div>

    <!-- 预览模态框 -->
    <div class="modal" id="preview-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">资源预览</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>以下显示的是该资源的前3页预览内容：</p>
                <div class="preview-pages">
                    <div class="page">
                        <div class="page-number">1</div>
                        <div class="page-content">第一页预览内容</div>
                    </div>
                    <div class="page">
                        <div class="page-number">2</div>
                        <div class="page-content">第二页预览内容</div>
                    </div>
                    <div class="page">
                        <div class="page-number">3</div>
                        <div class="page-content">第三页预览内容</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 下载模态框 -->
    <div class="modal download-modal" id="download-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">下载资源</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>请输入验证码以下载该资源</p>
                <input type="text" maxlength="3" class="code-input" id="code-input" placeholder="000">
                <p class="timer">验证码有效时间: <span id="countdown">60:00</span></p>
                <button class="confirm-btn" id="confirm-download">确认下载</button>
            </div>
        </div>
    </div>

    <script>
        // 模拟数据库 - 存储资源信息
        const resources = [
            {
                id: 1,
                stage: 'primary',
                subject: 'chinese',
                grade: '1',
                volume: '1',
                publisher: 'pep',
                type: 'textbook',
                title: '语文一年级上册电子课本',
                description: '人民教育出版社出版的一年级语文上册电子版教材，高清扫描版，包含完整内容。',
                fileSize: '45.2MB',
                format: 'PDF'
            },
            {
                id: 2,
                stage: 'primary',
                subject: 'chinese',
                grade: '1',
                volume: '1',
                publisher: 'pep',
                type: 'ppt',
                title: '语文一年级上册配套PPT',
                description: '与语文一年级上册教材完全同步的教学PPT，包含全部课时，可直接用于课堂教学。',
                fileSize: '78.5MB',
                format: 'ZIP'
            },
            {
                id: 3,
                stage: 'primary',
                subject: 'math',
                grade: '1',
                volume: '1',
                publisher: 'pep',
                type: 'textbook',
                title: '数学一年级上册电子课本',
                description: '人民教育出版社出版的一年级数学上册电子版教材，高清扫描版。',
                fileSize: '38.7MB',
                format: 'PDF'
            },
            {
                id: 4,
                stage: 'primary',
                subject: 'math',
                grade: '2',
                volume: '2',
                publisher: 'suzhou',
                type: 'test',
                title: '数学二年级下册期末试卷',
                description: '苏教版数学二年级下册期末测试卷，包含答案和解析。',
                fileSize: '5.2MB',
                format: 'DOCX'
            },
            {
                id: 5,
                stage: 'junior',
                subject: 'english',
                grade: '7',
                volume: '1',
                publisher: 'foreign',
                type: 'exercise',
                title: '英语七年级随堂练习',
                description: '外研版英语七年级上册同步随堂练习题目，包含听力材料和答案。',
                fileSize: '12.8MB',
                format: 'DOCX'
            },
            {
                id: 6,
                stage: 'senior',
                subject: 'physics',
                grade: '10',
                volume: '1',
                publisher: 'pep',
                type: 'textbook',
                title: '物理高一上册电子课本',
                description: '人教版高一物理上册电子教材，高清扫描版。',
                fileSize: '52.3MB',
                format: 'PDF'
            }
        ];

        // 当前选中的资源ID
        let currentResourceId = null;
        // 当前验证码和过期时间
        let currentCode = null;
        let codeExpiry = null;
        // 倒计时计时器
        let countdownTimer = null;

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 添加搜索按钮事件监听
            document.getElementById('search-btn').addEventListener('click', searchResources);

            // 关闭模态框
            document.querySelectorAll('.close-modal').forEach(closeBtn => {
                closeBtn.addEventListener('click', function() {
                    document.querySelectorAll('.modal').forEach(modal => {
                        modal.classList.remove('active');
                    });
                });
            });

            // 确认下载按钮
            document.getElementById('confirm-download').addEventListener('click', validateAndDownload);

            // 点击模态框背景关闭
            document.querySelectorAll('.modal').forEach(modal => {
                modal.addEventListener('click', function(e) {
                    if (e.target === this) {
                        this.classList.remove('active');
                    }
                });
            });

            // 初始搜索一次
            searchResources();
        });

        // 搜索资源函数
        function searchResources() {
            const stage = document.getElementById('stage').value;
            const subject = document.getElementById('subject').value;
            const grade = document.getElementById('grade').value;
            const volume = document.getElementById('volume').value;
            const publisher = document.getElementById('publisher').value;
            const type = document.getElementById('type').value;

            // 过滤资源
            const filteredResources = resources.filter(resource => {
                return (!stage || resource.stage === stage) &&
                       (!subject || resource.subject === subject) &&
                       (!grade || resource.grade === grade) &&
                       (!volume || resource.volume === volume) &&
                       (!publisher || resource.publisher === publisher) &&
                       (!type || resource.type === type);
            });

            // 显示资源
            displayResources(filteredResources);
        }

        // 显示资源卡片
        function displayResources(resources) {
            const container = document.getElementById('resources-container');
            container.innerHTML = '';

            if (resources.length === 0) {
                container.innerHTML = `
                    <div style="grid-column: 1 / -1; text-align: center; padding: 40px;">
                        <i class="fas fa-search" style="font-size: 3rem; color: var(--gray); margin-bottom: 20px;"></i>
                        <h3 style="color: var(--gray);">没有找到符合条件的资源</h3>
                        <p style="color: var(--gray);">请尝试调整筛选条件</p>
                    </div>
                `;
                return;
            }

            resources.forEach(resource => {
                const card = document.createElement('div');
                card.className = 'resource-card';

                card.innerHTML = `
                    <div class="card-header">
                        <h3 class="card-title">${resource.title}</h3>
                        <div class="card-subtitle">${getResourceSubtitle(resource)}</div>
                    </div>
                    <div class="card-body">
                        <p class="card-description">${resource.description}</p>
                        <div class="file-info">
                            <span>${resource.fileSize}</span>
                            <span>${resource.format}</span>
                        </div>
                        <div class="card-actions">
                            <button class="btn btn-preview" data-id="${resource.id}">
                                <i class="fas fa-eye"></i> 预览
                            </button>
                            <button class="btn btn-download" data-id="${resource.id}">
                                <i class="fas fa-download"></i> 下载
                            </button>
                        </div>
                    </div>
                `;

                container.appendChild(card);
            });

            // 添加预览和下载事件监听
            document.querySelectorAll('.btn-preview').forEach(btn => {
                btn.addEventListener('click', function() {
                    showPreview(parseInt(this.getAttribute('data-id')));
                });
            });

            document.querySelectorAll('.btn-download').forEach(btn => {
                btn.addEventListener('click', function() {
                    showDownloadModal(parseInt(this.getAttribute('data-id')));
                });
            });
        }

        // 生成资源副标题
        function getResourceSubtitle(resource) {
            const stages = { primary: '小学', junior: '初中', senior: '高中' };
            const subjects = {
                chinese: '语文', math: '数学', english: '英语',
                physics: '物理', chemistry: '化学', biology: '生物',
                history: '历史', geography: '地理'
            };
            const publishers = {
                pep: '人教版', suzhou: '苏教版', beishi: '北师大版',
                foreign: '外研版', huadong: '华师大版'
            };
            const types = {
                textbook: '电子课本', ppt: '教学PPT',
                exercise: '随堂练习', test: '试卷'
            };

            return `${stages[resource.stage]}${resource.grade}年级${subjects[resource.subject]}·${publishers[resource.publisher]}·${types[resource.type]}`;
        }

        // 显示预览模态框
        function showPreview(resourceId) {
            currentResourceId = resourceId;
            document.getElementById('preview-modal').classList.add('active');
        }

        // 显示下载模态框
        function showDownloadModal(resourceId) {
            currentResourceId = resourceId;

            // 生成验证码
            generateVerificationCode();

            // 显示模态框
            document.getElementById('download-modal').classList.add('active');

            // 清空输入框
            document.getElementById('code-input').value = '';

            // 启动倒计时
            startCountdown();
        }

        // 生成验证码
        function generateVerificationCode() {
            // 基于当前时间生成三位数验证码
            const now = new Date();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            // 使用简单算法生成验证码 (实际应用中应使用更安全的算法)
            currentCode = Math.floor((minutes * 60 + seconds) % 1000).toString().padStart(3, '0');

            // 设置过期时间 (1小时后)
            codeExpiry = new Date(now.getTime() + 60 * 60 * 1000);

            console.log("生成的验证码:", currentCode); // 在实际应用中不应在前端显示
        }

        // 启动倒计时
        function startCountdown() {
            clearInterval(countdownTimer);

            const countdownElement = document.getElementById('countdown');
            const expiryTime = codeExpiry.getTime();

            updateCountdown(); // 初始更新

            countdownTimer = setInterval(updateCountdown, 1000);

            function updateCountdown() {
                const now = new Date().getTime();
                const distance = expiryTime - now;

                if (distance <= 0) {
                    clearInterval(countdownTimer);
                    countdownElement.textContent = "00:00";
                    countdownElement.style.color = "var(--danger)";
                    return;
                }

                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                countdownElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

                // 最后5分钟变为红色
                if (minutes < 5) {
                    countdownElement.style.color = "var(--danger)";
                }
            }
        }

        // 验证并下载
        function validateAndDownload() {
            const inputCode = document.getElementById('code-input').value;

            if (inputCode === currentCode) {
                // 验证成功，开始下载
                alert('验证成功！开始下载资源...');

                // 在实际应用中，这里应该触发文件下载
                const resource = resources.find(r => r.id === currentResourceId);
                if (resource) {
                    // 创建虚拟下载链接
                    const fileName = `${resource.title}.${resource.format.toLowerCase()}`;
                    const a = document.createElement('a');
                    a.href = '#'; // 在实际应用中应指向真实文件URL
                    a.download = fileName;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                }

                // 关闭模态框
                document.getElementById('download-modal').classList.remove('active');
            } else {
                alert('验证码错误，请重新输入！');
                document.getElementById('code-input').value = '';
                document.getElementById('code-input').focus();
            }
        }
    </script>
</body>
</html>